<!DOCTYPE html>
<html lang = 'en'>
    <head>
        <meta charset="utf-8">
        <title>CSS</title>
        <style>
            /* 标签选择 优先据最低*/
            div{
                /* 颜色改变 */
                color: #1dab47;
                /* 字体大小 */
                font-size:100px;
                /* 设置字体粗细 */
                font-weight: 100;
            }

            /* id选择 */
            #d1{
                color: #d3216e;
                font-size: medium;
            }

            /* class选择 */
            .dd2{
                color: #239c72;
                font-family: 'Courier New', Courier, monospace;
                font-size: x-large;
            }

            /* 通配符选择器  全局选择*/
            /* * d3{
                color: aqua;
            } */

            /* 复合选择 */
            #d1,#d2{
                
                color: bisque;
                font-size: 123px;
            }

            /* 排列改变样式 */
            /* 只对ul中的li标签更改 */
            ul li{
                color:cornflowerblue;
                font-size: 50px;
            }
            /* 会ol的所有更改 */
            ol{
                /* 
                    只有块级元素（独占一行）才能设置 
                    h1-h6,p,div 
                    行内元素（没有独占一行）不能设置宽高 a span
                    width: 300px;
                    height: 200px;
                 */
                color: red;
                font-size: 50px;
            }
            /* 更加精细的更改 ul中的class 标签ll1修改*/
            ul .ll1{
                color:rgb(255, 255, 255);
                font-size: 50px;
            }
            

            ol A{
                color:rgb(152, 152, 39);
                font-size: 30px;
            }

            #d1{
                /* 边框的长宽 */
                width: 1000px;
                height: 500px;

                color: #00c8ff;
                /* 边框的格式 */
                border-style: solid;
                /* 对4条边的长度单独进行更改 */
                border-top-width: 40px;
                border-left-width: 20px;
                border-right-width: 30px;
                border-bottom-width: 10px;

                /* 改为行内元素 */
                /* display: inline; */
    
                /* 改为块级元素 */
                display: block;
            }

            /* span 21 */
            #ss{
                font-size: 100px;
                /* 设置内容到边框距离 */
                margin: 300px;
            }
            
            #d2{
                border-style: dashed;
                color: #ff00aa;
                /* 内边距 边框到内容的距离 */    
                /* padding: 100px; */
                padding-top: 20px;
                padding-left: 30px;
                padding-right: 40px;
                padding-bottom: 50px;
            }
        </style>

        
    </head>
    <!-- css要写在style标签中 用于控制页面的样式 -->
     <body>
        <div id = 'd1'>
            <span id = 's1'> span 1</span><br>
            <span name = 'ss1'> span 11</span>
        </div>
        <div id = 'd2' class = 'dd2'>
            <span id = 'ss'> span 21</span>
            <span > span 22</span>
            <span > span 23</span>
        </div>
        <div id = 'd3'>
            <span name = 's3' style = "color: #0f1fcf;"> span 3</span><br>
        </div>
     </body>
    <body>
        <!-- 排列 ul 是无序排列 ol是有序排列  -->
        <ul>
            <li class = "ll1">u1</li>
            <li>u2</li>
            <li>u3</li>
            end
        </ul>
        <ol>
            <a href = "A"> spanOl</a>
            <li>o1</li>
            <li>o2</li>
            <li>o3</li>
        </ol>
    </body>
</html>
<!-- next js -->